<template>
  <div class="app-container">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span class="card-title">旅行社审核详情</span>
          <div class="action-buttons">
            <el-button type="primary" @click="handleApprove" v-if="formData.auditStatus !== '通过'">通过审核</el-button>
            <el-button type="danger" @click="handleReject" v-if="formData.auditStatus !== '未通过'">拒绝审核</el-button>
            <el-button @click="goBack">返回列表</el-button>
          </div>
        </div>
      </template>

      <div class="info-container">
        <!-- 头像和基本信息 -->
        <div class="info-section">
          <div class="avatar-container">
            <el-avatar :size="120" :src="formData.travelAgencyAvatar" />
          </div>
          <div class="basic-info">
            <h3>{{ formData.travelAgencyName }}</h3>
            <el-tag :type="getStatusTagType(formData.auditStatus)">
              {{ formData.auditStatus }}
            </el-tag>
            <p class="register-time">注册时间: {{ formatTime(formData.registrationTime) }}</p>
          </div>
        </div>

        <!-- 详细信息 -->
        <div class="detail-info">
          <el-descriptions :column="1" border>
            <el-descriptions-item label="编号">{{ formatAgencyCode(formData.travelAgencyId) }}</el-descriptions-item>
           
            <el-descriptions-item label="旅行社名称">{{ formData.travelAgencyName }}</el-descriptions-item>
            <el-descriptions-item label="所在省份">{{ formData.province }}</el-descriptions-item>
            <el-descriptions-item label="所在城市">{{ formData.city }}</el-descriptions-item>
            <el-descriptions-item label="办公地址">{{ formData.officeAddress }}</el-descriptions-item>
            <el-descriptions-item label="联系电话">{{ formData.officePhone }}</el-descriptions-item>
            <el-descriptions-item label="联系邮箱">{{ formData.officeEmail }}</el-descriptions-item>
            <el-descriptions-item label="负责人姓名">{{ formData.principalName }}</el-descriptions-item>
            <el-descriptions-item label="负责人电话">{{ formData.principalPhone }}</el-descriptions-item>
          </el-descriptions>
        </div>

        <!-- 旅行社介绍 -->
        <div class="introduction-section" v-if="formData.travelAgencyIntroduction">
          <h4>旅行社介绍</h4>
          <div class="introduction-content">
            {{ formData.travelAgencyIntroduction }}
          </div>
        </div>


        <!-- 旅行社图片 -->
        <el-carousel :interval="4000" type="card" height="200px" v-if="agencyImages.length > 0">
          <el-carousel-item v-for="(img, idx) in agencyImages" :key="img.agencyImageId">
            <img :src="img.scenicSpotImage" style="width:100%;height:100%;object-fit:cover;" />
          </el-carousel-item>
        </el-carousel>

      </div>
    </el-card>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import dayjs from 'dayjs'
import axios from 'axios'

export default {
  name: 'AgencyAudit',
  setup() {
    const route = useRoute()
    const router = useRouter()
    const loading = ref(false)
    const formData = ref({
      travelAgencyId: '',
      travelAgencyName: '',
      province: '',
      city: '',
      travelAgencyAvatar: '',
      travelAgencyIntroduction: '',
      officeAddress: '',
      officePhone: '',
      officeEmail: '',
      principalName: '',
      principalPhone: '',
      registrationTime: '',
      auditStatus: '未审核'
    })
    const agencyImages = ref([])

    // 格式化时间显示
    const formatTime = (time) => {
      return dayjs(time).format('YYYY-MM-DD HH:mm')
    }

    // 获取状态标签类型
    const getStatusTagType = (status) => {
      switch (status) {
        case '通过': return 'success'
        case '未通过': return 'danger'
        case '未审核': return 'warning'
        default: return 'info'
      }
    }

    // 编号格式化函数：A+5位数字
    const formatAgencyCode = (id) => {
      if (!id) return ''
      return `A${id.toString().padStart(5, '0')}`
    }

    // 获取旅行社详情
    const fetchAgencyDetail = async () => {
      try {
        loading.value = true
        const id = route.params.id
        // Note the URL uses path variable now
        const response = await axios.get(`/mw/travelAgencyBasicDetail/${id}`)
        formData.value = response.data
        await fetchAgencyImages() // 获取图片
      } catch (error) {
        ElMessage.error('获取旅行社详情失败: ' + error.message)
      } finally {
        loading.value = false
      }
    }

    const fetchAgencyImages = async () => {
      try {
        const id = route.params.id
        const response = await axios.get(`/mw/travelAgencyImages/${id}`)
        agencyImages.value = response.data || []
      } catch (error) {
        ElMessage.error('获取旅行社图片失败: ' + error.message)
      }
    }

    // 通过审核
    const handleApprove = async () => {
      try {
        await ElMessageBox.confirm('确定通过该旅行社的审核吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })

        loading.value = true
        const response = await axios.post('/mw/approveTravelAgency', {
          id: formData.value.travelAgencyId
        })

        if (response.data > 0) {
          ElMessage.success('审核通过成功')
          formData.value.auditStatus = '通过'
        } else {
          ElMessage.error('审核操作失败')
        }
      } catch (error) {
        if (error !== 'cancel') {
          ElMessage.error('审核操作失败: ' + error.message)
        }
      } finally {
        loading.value = false
      }
    }

    // 拒绝审核
    const handleReject = async () => {
      try {
        await ElMessageBox.confirm('确定拒绝该旅行社的审核吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })

        loading.value = true
        const response = await axios.post('/mw/rejectTravelAgency', {
          id: formData.value.travelAgencyId
        })

        if (response.data > 0) {
          ElMessage.success('审核拒绝成功')
          formData.value.auditStatus = '未通过'
        } else {
          ElMessage.error('审核操作失败')
        }
      } catch (error) {
        if (error !== 'cancel') {
          ElMessage.error('审核操作失败: ' + error.message)
        }
      } finally {
        loading.value = false
      }
    }

    // 返回列表
    const goBack = () => {
      router.push('/agency/list')
    }

    onMounted(() => {
      fetchAgencyDetail()
    })

    return {
      formData,
      agencyImages,
      loading,
      formatTime,
      getStatusTagType,
      handleApprove,
      handleReject,
      goBack,
      formatAgencyCode
    }
  }
}
</script>

<style scoped>
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}


.app-container {
  padding: 20px;
}

.box-card {
  max-width: 1000px;
  margin: 0 auto;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-title {
  font-size: 18px;
  font-weight: bold;
}

.info-container {
  padding: 20px;
}

.info-section {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.avatar-container {
  margin-right: 30px;
}

.basic-info h3 {
  margin: 0 0 10px 0;
  font-size: 22px;
}

.register-time {
  margin-top: 10px;
  color: #888;
  font-size: 14px;
}

.detail-info {
  margin-bottom: 30px;
}

.introduction-section,
.image-section {
  margin-top: 30px;
}

.introduction-section h4,
.image-section h4 {
  margin-bottom: 15px;
  font-size: 16px;
  color: #333;
}

.introduction-content {
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 4px;
  line-height: 1.6;
}

.image-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.agency-image {
  width: 150px;
  height: 150px;
  border-radius: 4px;
  cursor: pointer;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .info-section {
    flex-direction: column;
    text-align: center;
  }

  .avatar-container {
    margin-right: 0;
    margin-bottom: 15px;
  }

  .agency-image {
    width: 100px;
    height: 100px;
  }
}
</style>